import React, {Component, Fragment} from 'react';
import {Button, Col, Divider, Form, Input, InputNumber, Row, Tag} from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
import {ModalFooter} from 'antd-extra';
import {TwitterPicker} from 'react-color';
import {blue, cyan, geekblue, gold, green, lime, magenta, purple, red} from '@ant-design/colors';
import notify from '../../NotificationExtra';
import ComponentBase from '../../Base/ComponentBase';

const _ = require('lodash');
moment.locale('zh-cn');

@Form.create()
class ModalBatchCreateNode extends ComponentBase {
  constructor(props) {
    super(props);
    this.state = { tagColor: this.getThemeProp('primary-color') };
  }

  componentDidMount() {

  }

  checkData = values => {
    let num = 0;
    for (const key in values) {
      if (!values[key]) {
        num++;
      }
    }
    if (num > 1) {
      notify({ message: '类型和名称必须有一项不为空',type:'error' });
      return false;
    }
    return true;
  };
  close = () => {
    const { result } = this.props;
    const values = this.props.form.getFieldsValue();
    if (!this.checkData(values)) {
      return;
    }
    result(values);
    this.props.modalRef.close();

  };
  selectColor = color => {
    const { hex } = color;
    this.setState({ tagColor: hex });
  };

  render() {
    const { form: { getFieldDecorator } } = this.props;
    let { tagColor, defaultValue,warning } = this.state;
    if (!defaultValue) {
      defaultValue = 1;
    }

    return (
      <Fragment>
        <Form>
          <Row>
            <Col span={3} style={{marginTop:'5px'}}>目录数量:</Col>
            <Col span={4}>
              {getFieldDecorator('num', { initialValue: defaultValue })(<InputNumber
                onChange={value => {
                  if(value.toString().indexOf('.')!==-1){
                    this.state.warning='数值必须为整数'
                  }else if(value>100){
                    this.state.warning='最大批量创建目录数量为100'
                  }else{
                    this.state.warning=''
                  }
                  const temp = `${value}`.replace('.', '');
                  this.state.defaultValue = temp;
                }}

                max={100}
                min={1}
                style={{width:'90%', marginRight: '12px' }}
                addonBefore={'目录数量'}
                required={true}></InputNumber>)}
            </Col>
            <Col style={{marginTop:'5px'}} span={4}>
              {warning}
            </Col>
          </Row>
          <Divider/>
          <Form.Item>
            {getFieldDecorator('type', {})(<Input
              style={{ width: '45%', marginRight: '12px' }}
              addonBefore={'目录类型'}
              required={true}></Input>)}
            {getFieldDecorator('name', {})(<Input
              addonBefore={'目录名称'}
              style={{ width: '45%' }}
              required={true}></Input>)}
          </Form.Item>

          {getFieldDecorator('backColor', { initialValue: tagColor })
          (<Tag style={{ marginBottom: 20 }} color={tagColor}> 背景色:{tagColor} </Tag>)}
          <TwitterPicker
            style={{ marginLeft: 20 }}
            width={410}
            color={tagColor}
            colors={[
              ...blue, ...geekblue, ...purple, ...green, ...lime, ...cyan, ...red, ...magenta, ...gold, this.getThemeProp('primary-color'),
            ]}
            onChange={this.selectColor}
            onChangeComplete={this.selectColor}>
          </TwitterPicker>
        </Form>

        <ModalFooter>
          <Button
            type="primary"
            onClick={() => {
              this.close();
            }}
          >确认
          </Button>
          <Button onClick={() => {
            this.props.modalRef.close();
          }}
          >取消
          </Button>
        </ModalFooter>
      </Fragment>
    );
  }
}

export default ModalBatchCreateNode;
